<template>
  <div class="mapv" ref="myEchartChina"></div>
</template>

<script>
import echarts from "echarts";
import "echarts/map/js/china.js"; // 引入中国地图数据
export default {
  name: "MapChina",
  data() {
    return {
      chart: null,
      timer: null
    };
  },
  mounted() {
    this.chinaConfigure(this.mapChina);
  },
  beforeDestroy() {
    this.clearTimer();
  },
  methods: {
    clearTimer() {
      //清除定时器
      clearInterval(this.timer);
      this.timer = null;
    },
    chinaConfigure(data) {
      let myChart = echarts.init(this.$refs.myEchartChina); //这里是为了获得容器所在位置
      myChart.setOption({
        // 进行相关配置
        tooltip: {
          textStyle: {
            align: "left"
          },
          formatter: function(params) {
            const tooltip = `
                ${params.data.name}<br />
                累计确诊：${params.data.confirmedCount}<br />
                现存确诊：${params.data.currentConfirmedCount}<br />
                疑似感染：${params.data.suspectedCount}<br />
                治愈人数：${params.data.curedCount}<br />
                死亡人数：${params.data.deadCount}`;
            return tooltip;
          }
        }, // 鼠标移到图里面的浮动提示框
        visualMap: {
          type: "piecewise",
          show: true,
          min: 0,
          max: 10000,
          realtime: true,
          left: "left",
          top: "bottom",
          pieces: [
            { gt: 10000 },
            { gt: 1000, lte: 10000 },
            { gt: 500, lte: 1000 },
            { gt: 100, lte: 500 },
            { gt: 10, lte: 100 },
            { lte: 10 }
          ],
          color: ["#9e002d", "#ffe7e2"],
          textStyle: {
            color: "#fff"
          }
        },
        geo: {
          // 这个是重点配置区
          map: "china", // 表示中国地图
          roam: true,
          label: {
            show: true,
            normal: {
              show: true, // 是否显示对应地名
              textStyle: {
                color: "rgba(0,0,0,0.6)"
              }
            }
          },
          itemStyle: {
            normal: {
              borderColor: "rgba(0, 0, 0, 0.2)"
            },
            emphasis: {
              areaColor: "#ea8b8b",
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 10,
              borderWidth: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)"
            }
          }
        },
        series: [
          {
            type: "scatter",
            coordinateSystem: "geo" // 对应上方配置
          },
          {
            type: "map",
            geoIndex: 0,
            data: data // 这里就是数据，即数组可以单独放在外面也可以直接写
          }
        ]
      });
      // 循环显示tooltip
      let idx = 0;
      this.timer = setInterval(() => {
        myChart.dispatchAction({
          type: "showTip",
          seriesIndex: 1,
          dataIndex: idx
        });
        idx = (idx + 1) % data.length;
      }, 3000);
    }
  },
  props: {
    mapChina: Array
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.mapv {
  padding: 20px;
  height: 100%;
  box-sizing: border-box;
}
</style>
